package com.example.yifei.ui.page.main.purchase.tab

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.hilt.navigation.compose.hiltViewModel
import androidx.navigation.NavHostController
import coil.annotation.ExperimentalCoilApi
import coil.compose.LocalImageLoader
import coil.compose.rememberImagePainter
import com.example.yifei.R
import com.example.yifei.ui.page.widgets.AppToolsBar


/**
 * @Author: ZhuDaiHao
 * @Date: 2022/5/14
 * @Describe: 采购列表详情
 */

@ExperimentalMaterialApi
@ExperimentalCoilApi
@Composable
fun PurchaseDetails(
    navCtrl: NavHostController,
    viewModel: PurchaseDetailsViewModel = hiltViewModel()
) {
    Column(
        modifier = Modifier
            .background(color = Color(0xffF4F6FB))
            .fillMaxWidth()
            .fillMaxHeight()
    ) {
        Box {

            Image(
                painter = painterResource(R.mipmap.detals_bar_bg),
                contentDescription = null,
                contentScale = ContentScale.FillBounds,
                modifier = Modifier
                    .fillMaxWidth()
                    .height(299.dp)
            )


            AppToolsBar(title = "需求详情", onBack = {
                navCtrl.popBackStack()
            })


            LazyColumn(
                modifier = Modifier.padding(
                    top = 90.dp,
                    start = 8.dp,
                    end = 8.dp,
                )
            ) {

                item { State() }

                item { PurchaseCode() }

                item { Spacer(modifier = Modifier.padding(top = 10.dp)) }

                item { Supplier() }

                itemsIndexed(viewModel.list) { _, item ->
                    Form(item)
                }

                item { Money() }

                item { Spacer(modifier = Modifier.padding(top = 10.dp)) }

                item { Image() }


                item {
                    Text(
                        text = "注意：\n1.请上传该采购明细对应的码单图片并点击【确认提交码单】，提交后不能再修改\n2.如该采购单不使用易菲金条，则无需上传码单图片；或整单不使用易菲金条，请点击【撤回申请】",
                        color = Color(0xffB4B7D0),
                        fontSize = 12.sp,
                        modifier = Modifier.padding(
                            start = 16.dp,
                            top = 16.dp,
                            end = 8.dp,
                            bottom = 140.dp
                        )
                    )
                }

            }



            Row(
                modifier = Modifier
                    .align(alignment = Alignment.BottomCenter)
                    .fillMaxWidth()
                    .background(color = Color.White)
                    .padding(16.dp)
            ) {

                Button(
                    modifier = Modifier
                        .weight(1f)
                        .height(48.dp),
                    colors = ButtonDefaults.buttonColors(backgroundColor = Color(0xffF4F6FB)),
                    onClick = {
                        //
                    }
                ) {
                    Text(text = "撤回申请", color = Color(0xFF336AF8), fontSize = 16.sp)
                }


                Spacer(modifier = Modifier.width(11.dp))

                Button(
                    modifier = Modifier
                        .weight(1f)
                        .height(48.dp),
                    colors = ButtonDefaults.buttonColors(backgroundColor = Color(0xff336AF8)),
                    onClick = {
                        //
                    }
                ) {
                    Text(text = "确认提交码单", color = Color.White, fontSize = 16.sp)
                }


            }


        }


    }

}


@Composable
private fun State() {
    Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier
            .padding(start = 16.dp, end = 16.dp)
            .fillMaxWidth()
    ) {
        Text(
            text = "待上传",
            color = Color.White,
            fontSize = 20.sp,
            fontWeight = FontWeight.W500,
            modifier = Modifier
                .align(Alignment.CenterVertically)
        )


        Image(
            painter = painterResource(id = R.mipmap.state),
            contentDescription = "状态",
            contentScale = ContentScale.FillBounds,
            modifier = Modifier.size(64.dp)
        )
    }


}


@ExperimentalCoilApi
@Composable
fun PurchaseCode() {
    Column(
        modifier = Modifier.background(
            shape = RoundedCornerShape(8.dp),
            color = Color.White
        )
    ) {

        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .padding(
                    start = 17.dp,
                    end = 16.dp,
                    top = 16.dp,
                    bottom = 12.dp
                )
                .fillMaxWidth()
        ) {

            Text(
                text = "采购单号：W00000101",
                fontSize = 14.sp,
                color = Color(0xff8D90A8)
            )

        }

        Divider(color = Color(0xffF0F0F0), thickness = 0.5.dp)

        Row(
            modifier = Modifier
                .padding(start = 16.dp, top = 16.dp, bottom = 22.dp)
                .fillMaxWidth(),
        ) {
            Image(painter = rememberImagePainter(
                data = "https://img2.baidu.com/it/u=4082638878,2094653673&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500",
                imageLoader = LocalImageLoader.current,
                builder = {
                    placeholder(0)
                }
            ), contentDescription = "image",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(90.dp)
                    .clip(shape = RoundedCornerShape(4.dp)))


            Column(modifier = Modifier.padding(start = 12.dp)) {
                Text(
                    text = "平台单号：vsbjsjwjkwkkw",
                    fontSize = 14.sp,
                    color = Color(0xff373C55)
                )

                Text(
                    text = "客户款式：1235627828",
                    fontSize = 12.sp,
                    color = Color(0xff8D90A8),
                    modifier = Modifier.padding(bottom = 4.dp, top = 4.dp)
                )

                Text(
                    text = "平台款号：SPU999900",
                    fontSize = 12.sp,
                    color = Color(0xff8D90A8),
                )

            }


        }


    }
}


@Composable
fun Supplier() {
    Column(
        modifier = Modifier
            .background(
                shape = RoundedCornerShape(topStart = 8.dp, topEnd = 8.dp),
                color = Color.White
            )
            .padding(start = 16.dp, end = 16.dp)
    ) {

        Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .height(48.dp)
                .fillMaxWidth()
        ) {

            Text(
                text = "供应商：优衣库贸易有限公司",
                fontSize = 14.sp,
                color = Color(0xff373C55)
            )

            Text(
                text = "复制采购信息",
                fontSize = 12.sp,
                color = Color(0xff336AF8)
            )

        }


        Column(
            modifier = Modifier
                .fillMaxWidth()
                .height(40.dp)
                .background(color = Color(0xffFBFCFF)),
            verticalArrangement = Arrangement.Center
        ) {
            Text(
                text = "货号/品名：1811缎纹直弹/1811缎",
                fontSize = 12.sp,
                color = Color(0xff13131A),
                modifier = Modifier.padding(start = 13.dp)
            )
        }
    }

}


@Composable
private fun Form(item: MessageBean) {
    Column(
        modifier = Modifier
            .background(color = Color.White)
            .padding(start = 16.dp, end = 16.dp)
    ) {
        Column(
            modifier = Modifier
                .background(color = Color(0xffF5F7FE))
                .fillMaxWidth(),
            verticalArrangement = Arrangement.Center
        ) {
            Row(
                modifier = Modifier
                    .height(40.dp)
                    .fillMaxWidth()
            ) {

                Text(
                    text = item.code,
                    fontSize = 12.sp,
                    color = Color(0xff13131A),
                    modifier = Modifier
                        .weight(1.2f)
                        .padding(start = 13.dp, top = 12.dp, end = 12.dp)
                )

                Text(
                    text = item.company,
                    fontSize = 12.sp,
                    color = Color(0xff13131A),
                    modifier = Modifier
                        .weight(1f)
                        .padding(start = 12.dp, top = 12.dp, end = 12.dp)
                )

                Text(
                    text = item.number,
                    fontSize = 12.sp,
                    color = Color(0xff13131A),
                    modifier = Modifier
                        .weight(1f)
                        .padding(start = 12.dp, top = 12.dp, end = 12.dp)
                )
            }

            //
            Row(
                modifier = Modifier
                    .height(40.dp)
                    .fillMaxWidth()
            ) {

                Text(
                    text = item.price,
                    fontSize = 12.sp,
                    color = Color(0xff13131A),
                    modifier = Modifier
                        .weight(1.2f)
                        .padding(start = 13.dp, top = 12.dp, end = 12.dp)
                )

                Text(
                    text = item.money,
                    fontSize = 12.sp,
                    color = Color(0xff13131A),
                    modifier = Modifier
                        .weight(2f)
                        .padding(start = 12.dp, top = 12.dp, end = 12.dp)
                )


            }
        }

        Divider(color = Color.White)
    }
}

@Composable
private fun Money() {
    Column(
        modifier = Modifier
            .background(
                shape = RoundedCornerShape(
                    bottomStart = 8.dp,
                    bottomEnd = 8.dp
                ),
                color = Color.White
            )
            .fillMaxWidth()
            .padding(
                start = 16.dp,
                bottom = 16.dp,
                top = 12.dp
            )
    ) {
        Text(
            text = "金额：900.00",
            fontSize = 12.sp,
            color = Color(0xff13131A)
        )

    }
}


@ExperimentalCoilApi
@Composable
fun Image() {
    Column(
        modifier = Modifier.background(
            shape = RoundedCornerShape(8.dp),
            color = Color.White
        )
    ) {

        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier
                .padding(
                    start = 17.dp,
                    end = 16.dp,
                    top = 16.dp,
                )
                .fillMaxWidth()
        ) {

            Text(
                text = "码单图片",
                fontSize = 14.sp,
                color = Color(0xff13131A)
            )


            Text(
                text = "(最多上传9张，每张不能大于20M)",
                fontSize = 12.sp,
                color = Color(0xff13131A),
                modifier = Modifier.padding(start = 4.dp)
            )
        }

        Row(
            modifier = Modifier
                .padding(start = 17.dp, top = 17.dp, bottom = 16.dp)
                .fillMaxWidth(),
        ) {
            Image(
                painter = painterResource(id = R.mipmap.add_images), contentDescription = "image",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(68.dp)
            )

        }


    }
}